<template>
  <div class="container">
    <el-card>
      <div class="txt" style="display: inline-block">
        说明:目前支持学科和关键字条件筛选
      </div>
      <el-button
        type="success"
        style="float: right"
        size="small"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
      <el-form ref="form" label-width="90px" :model="formData">
        <el-row class="frame">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.subjectID"
              >
                <el-option
                  v-for="(item, index) in list"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.catalogID"
              >
                <el-option
                  v-for="(item, index) in catalogID"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.tags"
              >
                <el-option
                  v-for="(item, index) in tag"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                placeholder="请输入"
                v-model="formData.keyword"
                style="width: 96%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row class="frame">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.questionType"
                @focus="questionType"
              >
                <el-option
                  v-for="(item, index) in questionsType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.difficulty"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.direction"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                style="width: 96%"
                placeholder="请选择"
                v-model="formData.creatorID"
              >
                <el-option
                  v-for="(item, index) in getUsers"
                  :key="index"
                  :label="item.username"
                  :value="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                style="width: 96%"
                v-model="formData.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" flex="1">
            <el-form-item label="企业简称">
              <el-input
                style="width: 96%"
                v-model="formData.shortName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                style="width: 48%; margin-right: 3px"
                placeholder="请选择"
                size="small"
                v-model="formData.province"
                @change="this.getCitys1"
              >
                <el-option
                  v-for="(item, index) in getCitys.citys"
                  :key="index"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                style="width: 48%"
                size="small"
                v-model="formData.city"
              >
                <el-option
                  v-for="(item, index) in getCitys.city"
                  :key="index"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end" style="width: 96%">
              <el-button size="small" style="float: right" @click="eliminate"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="small"
                style="float: right"
                @click="setSearch"
                >搜索</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab标签页 -->
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 消息提示框 -->
      <el-alert
        :title="`数据一共${choiceness.length}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格内容区域 -->
      <el-row>
        <el-table stripe :data="choiceness">
          <el-table-column prop="number" label="试题编号" align="center">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="115"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="catalogID" label="目录" align="center">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            align="center"
            :formatter="formatQuestionType"
          >
          </el-table-column>
          <el-table-column prop="question" label="题干" align="center">
            <template v-slot="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column width="280"></el-table-column>
          <el-table-column label="录入时间" align="center" width="150">
            <template v-slot="scope">
              {{ scope.row.addDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            align="center"
            :formatter="formatEmployment"
          >
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column
            prop="chkState"
            label="审核状态"
            :formatter="formatchkType"
          >
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人"> </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="195"
            align="center"
            fixed="right"
          >
            <template v-slot="scope">
              <el-button type="text" size="small" @click="preview(scope.row.id)"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="audit(scope.row.id)"
                :disabled="scope.row.chkState === 1 || scope.row.chkState === 2"
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/questions/new/${scope.row.id}`)"
                :disabled="scope.row.chkState === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="grounding(scope.row)"
                >{{
                  scope.row.publishState * 1 === 1 ? "上架" : "下架"
                }}</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="deleFn(scope.row)"
                :disabled="scope.row.chkState === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 放置分页 -->
        <el-row type="flex" justify="end" style="margin-top: 15px">
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="page.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="page.total"
          >
          </el-pagination>
        </el-row>
      </el-row>
    </el-card>
    <!-- 预览组件弹层 -->
    <Preview
      :isShow.sync="isShow"
      :details="choiceness[rowsID]"
      v-if="isShow"
    ></Preview>
    <!-- 审核弹层 -->
    <Audit
      :isShow.sync="loading"
      :auditId="auditId"
      :getchoiceness="choiceness"
      @setAudit="setAudit"
    ></Audit>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/subjects' // 学科列表
import { simple as simpleY } from '@/api/hmmm/directorys' // 目录简单列表
import { simple as simpleTags } from '@/api/hmmm/tags' // 标签简单列表
import {
  questionType as questionTypes,
  difficulty,
  direction,
  questionType,
  chkType
} from '@/api/hmmm/constants' // 模拟数据
import { list as getUser } from '@/api/base/users' // 获取用户列表
import { provinces, citys } from '@/api/hmmm/citys' // 城市与城区
import {
  choice as getChoice,
  choicePublish,
  remove
} from '@/api/hmmm/questions'
import Preview from '../components/Preview.vue'
import Audit from '../components/audit.vue'
export default {
  data () {
    return {
      list: [], // 学科列表
      catalogID: [], // 目录简单列表
      tag: [], // 标签简单列表
      questionsType: [], // 试题类型
      difficulty: [], // 难度
      direction: [], // 方向
      getUsers: [], // 获取用户列表
      getCity: [], // 获取城市下的城区信息
      choiceness: [], // 精选题库列表
      loading: false,
      auditId: 0,
      activeName: 'all',
      // 分页
      page: {
        page: 1, // 当前页码
        pagesize: 5, // 页大小
        total: 0 // 总记录数
      },
      State: null,
      // 表单绑定字段
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城区
        province: '', // 企业所在地城市
        chkState: '' // 审核状态
      },
      // 城市
      getCitys: {
        citys: '',
        city: ''
      },
      rowsID: 0,
      isShow: false // 预览弹层
    }
  },
  components: {
    Preview,
    Audit
  },
  created () {
    this.getSimple()
    this.simpleCatalogID()
    this.simpleTags()
    this.difficultyType()
    this.directionType()
    this.getUser()
    this.getProvinces()
    this.getChoice()
  },
  watch: {
    'formData.subjectID' (val) {
      this.simpleCatalogID()
      this.simpleTags()
    }
  },
  methods: {
    // 获取学科列表
    getSimple () {
      simple().then((res) => {
        this.list = res.data
        // console.log(this.list);
      })
    },
    // 获取二级目录
    simpleCatalogID () {
      if (this.formData.subjectID) {
        simpleY().then((res) => {
          this.catalogID = res.data
          // console.log(this.catalogID);
        })
      }
    },
    // 获取标签列表
    simpleTags () {
      if (this.formData.subjectID) {
        simpleTags().then((res) => {
          this.tag = res.data
          // console.log(this.tag);
        })
      }
    },
    // 试题类型
    questionType () {
      this.questionsType = questionTypes
    },
    // 难度
    difficultyType () {
      this.difficulty = difficulty
    },
    // 方向
    directionType () {
      this.direction = direction
    },
    // 录入人
    async getUser () {
      const { ...data } = await getUser(this.page, this.keyword)
      this.getUsers = data.data.list
    },
    // 城市
    getProvinces () {
      this.getCitys.citys = provinces()
    },
    // 城区
    getCitys1 (val) {
      this.formData.city = ''
      this.getCitys.city = citys(val)
    },
    // 清除按钮
    eliminate () {
      this.formData = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城区
        province: '' // 企业所在地城市
      }
      this.getChoice()
    },
    // 点击分几页
    handleSizeChange (val) {
      // console.log(val); //10
      this.page.pagesize = val
      // 更新数据
      this.getChoice()
    },
    // 点击当前页码分页分页
    handleCurrentChange (val) {
      // console.log(val);
      this.page.page = val
      this.getChoice()
    },
    // 获取精选题库列表
    async getChoice () {
      const { data } = await getChoice({
        page: this.page.page,
        pagesize: this.page.pagesize,
        chkState: this.State
      })
      this.choiceness = data.items
    },
    // 预览弹层
    preview (id) {
      var index = this.choiceness.findIndex((item) => item.id === id)
      console.log(index)
      this.isShow = true
      this.rowsID = index
    },
    // 删除功能
    deleFn (data) {
      this.$confirm('确定删除该数据吗？')
        .then(() => {
          return remove(data)
        })
        .then(() => {
          this.$message.success('删除成功')
          this.getChoice()
        })
    },
    // 审核
    audit (id) {
      this.loading = true
      this.auditId = id
    },
    // 搜索按钮
    setSearch () {
      getChoice(this.formData).then((res) => {
        this.choiceness = res.data.items
      })
    },
    // 审核重新渲染列表
    setAudit () {
      this.getChoice()
    },
    // 上架下架
    grounding (data) {
      this.$confirm(
        `你确定${data.publishState === 0 ? '下架' : '上架'}这道题吗`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          try {
            // if判断是否通过审核
            if (data.chkState === 1) {
              await choicePublish({
                id: data.id,
                publishState: data.publishState === 0 ? 1 : 0
              })
              // 更新视图
              this.getChoice()
              // 提示用户
              this.$message.success(
                `${data.publishState === 0 ? '下架' : '上架'}成功`
              )
            } else {
              this.$message.warning('请先通过审核')
            }
          } catch (err) {
            console.log(err)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 格式化题型
    formatQuestionType (row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value * 1 === cellValue * 1)
      return obj ? obj.label : '未知'
    },
    // 格式化难度
    formatEmployment (row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value * 1 === cellValue * 1)
      return obj ? obj.label : '未知'
    },
    // 格式化审核状态
    formatchkType (row, column, cellValue, index) {
      const obj = chkType.find((item) => item.value * 1 === cellValue * 1)
      return obj ? obj.label : '未知'
    },
    // tab页切换
    handleClick (tab, event) {
      if (this.activeName === 'all') {
        this.State = null
        this.getChoice()
      } else {
        this.State = this.activeName * 1
        this.page.page = 1
        this.getChoice()
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.txt {
  font-size: 12px;
 color: pink;
  margin-bottom: 30px;
}
.frame {
  font-weight: 700;
}
</style>
